<template>
  <el-container class="home-container">
    <el-header class="home-header">
      <router-link to="/index" class="home-title">在线学习课堂</router-link>
      <div style="display: flex;width: 40%; float: left;text-align: center">
        <el-input style="width: 80%;height: 100%; " placeholder="请输入内容" suffix-icon="el-icon-search" @keyup.enter.native="dosearch" v-model="search"/>
        <el-button class="home-search" @click="dosearch" >搜索</el-button>
      </div>
      <div style="margin-right: 10px; width: 30%;text-align: right">
        <el-dropdown  @command="handleCommand" v-if="login">
          <span class="el-dropdown-link home-userinfo" style="display: flex; align-items: center">
            {{user.name}}
            <i><img v-if="user.iconUrl != ''" :src="user.iconUrl"
                    style="width: 30px;height: 30px;margin-top: 20px; margin-right: 20px; margin-left: 15px;border-radius: 40px"/></i>
          </span>
          <el-dropdown-menu slot="dropdown" v-if="login">
            <el-dropdown-item command="toUserInfo">个人中心</el-dropdown-item>
            <el-dropdown-item><router-link to="/schedule" tag="span" style="width: 100%;height: 100%">课程表</router-link></el-dropdown-item>
            <el-dropdown-item>设置</el-dropdown-item>
            <el-dropdown-item command="logout" divided>注销</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <router-link to="/" v-if="!login"><el-button style="color: #000; margin-right: 10px; font-size:17px" type="text">登录</el-button></router-link>
      </div>
    </el-header>
    <el-main style="margin: 0; padding: 0;height: 1476px">
      <router-view/>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: 'MyHome',
  data () {
    return {
      search: '',
      login: window.sessionStorage.token,
      isDot: false
    }
  },
  methods: {
    dosearch () {
      this.search=this.search.trim()
      if (this.search && this.search != '') {
        this.$router.push('/index?search='+this.search)
        this.search=''
      } else {
        this.$message('请输入关键词')
      }
    },
    handleCommand (cmd) {
      var _this = this
      if (cmd == 'logout') {
        this.$confirm('注销登录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _this.getRequest('/logout')
          window.sessionStorage.clear()
          _this.$store.commit('logout')
          _this.$router.replace({path: '/'})
        }).catch(() => {
          _this.$message({
            type: 'info',
            message: '取消'
          })
        })
      } else if (cmd == 'toUserInfo') {
        _this.$router.push('/userInfo')
      }
    }
  },
  computed: {
    user(){
      return this.$store.state.user
    }
  }
}
</script>

<style scoped>
  .home-container {
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
/*background-color: #d6d6d6*/
  }

  .home-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: content-box;
    padding: 0px;
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;

  }

  .home-search {
    width: 20%;
    height: 100%;
    margin: 10px 0px 10px 0px;
    border-top-left-radius: 5px;
    color: #ffffff;
    background-color: #409EFF;
    border-width: 0px;
  }

  .home-userinfo {
    color: #fff;
    cursor: pointer;
  }

  .home-title {
    color: #fff;
    font-size: 22px;
    display: inline;
    margin-left: 8px;
    text-decoration: none;
    text-align: left;
  }
</style>
